import React from "react";
import { observer, inject } from "mobx-react";
import {} from "antd-mobile";
import "./Dialog.less";
import dayjs from "dayjs";
import MessageTemplate from "@components/MessageTemplate/index";
const xss = require("xss");

var relativeTime = require("dayjs/plugin/relativeTime");
require("dayjs/locale/zh-cn");
dayjs.extend(relativeTime);

@inject("application")
@observer
class Dialog extends React.Component {
  static defaultProps = {
    //设置props默认值方法
    type: "text",
    position: "left",
    name: "AI聊天机器人",
    message: "",
    url: "",
    time: new Date(),
    template: null,
  };

  state = {};

  componentDidMount() {}

  render() {
    const {} = this.state;
    const { type, position, name, message, url, time, template, application } =
      this.props;
    const exceedDay = 24;
    const difference = Math.abs(dayjs(time).diff(new Date(), "hour"));

    const applicationInfo = application.info
    const logo = applicationInfo.extraInfo["机器人的Logo"] || ""

    const dayTime =
      difference >= exceedDay
        ? dayjs(time).format("YYYY-MM-DD HH:mm:ss")
        : dayjs(time).locale("zh-cn").toNow();

    // console.log("application", application, applicationInfo.extraInfo)

    return (
      <div className={`dialog dialog-${position}`}>
        {position === "left" ? (
          <div className="avatar">
            { logo ? (
              <img className="logo" src={logo} />
            ) : (
              <i class="fa fa-plug fa-lg"></i>
            )}
          </div>
        ) : null}
        <div className="info">
          {/* <div className="name">{position === "left" ? name : "测试用户"}</div> */}
          {type === "text" ? (
            <div
              className="message"
              // dangerouslySetInnerHTML={{ __html: xss(message) }}
            >
              {xss(message)}
              </div>
          ) : null}
          {type === "audio" ? (
            <div className="message">
              <audio src={url} controls={true}></audio>
            </div>
          ) : null}
          {type === "template" ? (
            <div className="messageTemplate">
              <MessageTemplate template={template}></MessageTemplate>
            </div>
          ) : null}
          <div className="time">
            {dayTime} {type === "template" ? " (from RCS)" : null}
          </div>
        </div>
        {position === "right" ? (
          <div className="avatar">
            <i class="fa fa-user-o fa-lg"></i>
          </div>
        ) : null}
      </div>
    );
  }
}

export default Dialog;
